import React, { Component } from 'react';
import { Text, View, Image } from 'react-native';
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
import {
	Scene,
	Router,
	Actions,
	Reducer,
	ActionConst,
	Overlay,
	Tabs,
	Modal,
	Drawer,
	Stack,
	Lightbox,
} from 'react-native-router-flux';
import { connect, Provider } from 'react-redux';
import { createStore, applyMiddleware, compose, bindActionCreators } from 'redux';
import thunk from 'redux-thunk';
import reducers from '../reducers';
import actioncoll from '../actions';
//const RouterWithRedux = connect()(Router);

import TabIcon from '../components/TabIcon';
import mine from '../pages/mine';
import home from '../pages/home';
import applications from '../pages/applications';
import todo from '../pages/todo';
import ContactsPage from '../pages/contacts';
import login from '../pages/login';
import PopupTest from '../pages/PopupTest';

import initPage from '../pages/initPage';
import Session from '../utils/SessionUtils';

const middleware = [thunk];
const store = compose(applyMiddleware(thunk))(createStore)(reducers);

const reducerCreate = params => {
	const defaultReducer = new Reducer(params);
	return (state, action) => {
		store.dispatch(action);
		console.log('ACTION:', action);
		return defaultReducer(state, action);
	};
};

const getSceneStyle = () => ({
	backgroundColor: 'white',
	shadowOpacity: 0,
	shadowRadius: 0,
});

const scenes = Actions.create(
	<Overlay key="root">
		<Modal
			key="modal"
			hideNavBar
			transitionConfig={() => ({ screenInterpolator: CardStackStyleInterpolator.forFadeFromBottomAndroid })}
		>
			<Lightbox key="lightbox">
				<Scene key="launch" component={initPage} title="Launch" initial />
			</Lightbox>

			<Tabs
				key="tabbar"
				gestureEnabled={false}
				tabs
				type={ActionConst.REPLACE}
				showLabel={false}
				tabBarStyle={{ backgroundColor: '#eee' }}
				activeBackgroundColor="#ddd"
			>
				{/* 第一个Tab导航栈，使用了Stack标签，这里选中第一个tab，使用initial 参数 */}
				<Stack
					key="tabhome"
					initial
					title="主页"
					hideNavBar
					inactive={require('../../res/image/TabBar_home_fabu.png')}
					active={require('../../res/image/TabBar_home_fabu_current.png')}
					icon={TabIcon}
				>
					<Scene key="home" component={home} />
					<Scene key="todo" hideTabBar component={todo} />

					{/* {connect((state) => state.picture.login, Action.dispatch('picture'))(home)}  */}
				</Stack>
				{/* 第二个Tab，使用了Scene标签 */}
				{/* 这里没有发现上面使用的stack和下面的scene标签没有什么区别 */}
				<Scene
					key="tabcontacts"
					title="通讯录"
					hideNavBar
					inactive={require('../../res/image/TabBar_home_tongxunlu.png')}
					active={require('../../res/image/TabBar_home_tongxunlu_current.png')}
					icon={TabIcon}
					onRight={() => {
						console.log(Session);
					}}
					rightTitle="Right"
				>
					<Scene key="contacts" component={ContactsPage} />
				</Scene>

				<Scene
					key="tabapps"
					title="应用"
					hideNavBar
					inactive={require('../../res/image/TabBar_yewubanli.png')}
					active={require('../../res/image/TabBar_yewubanli_current.png')}
					icon={TabIcon}
				>
					<Scene key="applications" component={applications} />
				</Scene>

				<Scene
					key="tabmine"
					title="我的"
					hideNavBar
					inactive={require('../../res/image/TabBar_me.png')}
					active={require('../../res/image/TabBar_me_current.png')}
					icon={TabIcon}
				>
					<Scene key="mine" component={mine} />
				</Scene>
			</Tabs>

			<Scene key="login" component={login} />
		</Modal>
	</Overlay>
);

class RouterApp extends Component {
	render() {
		return (
			<Provider store={store}>
				<View style={{ flex: 1 }}>
					<Router
						scenes={scenes}
						createReducer={reducerCreate}
						tintColor="white"
						getSceneStyle={getSceneStyle}
					/>
				</View>
			</Provider>
		);
	}
}

export default RouterApp;
